<template>
  <el-form class="headform" label-position="right" :inline="true" v-model="searchForm" label-width="auto">
    <el-row>
      <el-col :span="8">
        <el-form-item label="开票号">
          <el-input v-model="searchForm.invoiceNumber" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户名称">
          <el-select v-model="searchForm.customerName" filterable remote reserve-keyword placeholder="请选择"
            :remote-method="searchCustomer" :loading="loading">
            <el-option v-for="item in customerNameOptions" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="合同号">
          <el-input v-model="searchForm.contractNo" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开票金额">
          <el-input v-model="searchForm.commodityMoney" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" class="button">
        <el-button type="primary" @click="searchList">查询</el-button>
        <el-button type="primary" @click="examineList">一键审核</el-button>
        <el-button type="primary" @click="exportList">导出</el-button>
      </el-col>
    </el-row>
  </el-form>
  <el-table :data="tableData" style="width: 100%;" ref="table" @selection-change="handleSelectionChange"
    table-layout="auto" row-key="getRowKeys">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="invoiceNumber" label="开票号" align="center"></el-table-column>
    <el-table-column prop="type" label="类型" align="center"></el-table-column>
    <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
    <el-table-column prop="contractNo" label="合同号" align="center"></el-table-column>
    <el-table-column prop="commodityMoney" label="开票金额" align="center"></el-table-column>
    <el-table-column prop="way" label="付款方式" align="center">
      <template #default="scope">
        <span
          v-if="scope.row.type != '内销-增值税普通发票' && scope.row.type != '内销-增值税专用发票' && scope.row.type != '外销-形式发票-零部件'">{{
            scope.row.invoiceRatio }}%{{ scope.row.invoiceMethod }}</span>
        <span v-else></span>
      </template>
    </el-table-column>
    <el-table-column prop="applyTime" label="日期" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="examine(scope.row)" link size="small">审核</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15]"
    :small="small" :disabled="disabled" :background="background" layout="total, prev, pager, next, sizes, jumper"
    :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref, reactive, inject, onMounted, provide, defineEmits } from 'vue'
import { useStore } from '@/stores/counter';
import { useRouter } from "vue-router";
import { qdList, findAllByName, ganxiangExamine, lingbujianExamine, exportdaishenhe } from '@/utils/invoice';
import { boolean } from 'mathjs';
const router = useRouter();
const use_store = useStore()
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const totalPage = ref(0)
const Id = ref('')
const user = localStorage.getItem("user")
const token = JSON.parse(user).token
const headers = { token: token }
const searchForm = ref({
  commodityMoney: "",
  contractNo: "",
  customerName: "",
  invoiceNumber: "",
  type: "",
  status: "待审核"
})
const tableData = ref([])
const selectLingList = ref([])
const selectDryList = ref([])
const customerNameOptions = ref([])

onMounted(() => {
  searchList()
})

function searchList() {
  qdList(searchForm.value, currentPage4.value, pageSize4.value).then(res => {
    tableData.value = res.data.records
    totalPage.value = res.data.total
  })
}

function handleSelectionChange(val) {
  selectLingList.value = val.map(item => {
    if (item.type == "外销-形式发票-零部件")
      return item.id
  })
  selectLingList.value = selectLingList.value.filter(item => {
    if (item != null) {
      return item
    }
  })
  selectDryList.value = val.map(item => {
    if (item.type != "外销-形式发票-零部件")
      return item.id
  })
  selectDryList.value = selectDryList.value.filter(item => {
    if (item != null) {
      return item
    }
  })
}

function handleSizeChange() {
  searchList()
}

function handleCurrentChange() {
  searchList()
}

function examine(row) {
  use_store.id = row.id
  use_store.operation = 5
  use_store.path = 'list'
  if (row.remark != '3') {
    if (row.type == '外销-形式发票-零部件') {
      use_store.status = 4;
      if (row.lingbujianCommodityList.length > 4) {
        router.push({
          path: 'InvoiceDoubleChange'
        })
      } else {
        router.push({
          path: 'InvoiceChange'
        })
      }
    } else if (row.type == '外销-形式发票-干箱-自接') {
      use_store.status = 1;
      if (row.ganxiangCommodityList.length > 4) {
        router.push({
          path: 'InvoiceDoubleChange'
        })
      } else {
        router.push({
          path: 'InvoiceChange'
        })
      }
    } else if (row.type == '外销-形式发票-干箱-BSL') {
      use_store.status = 3;
      if (row.ganxiangCommodityList.length > 4) {
        router.push({
          path: 'InvoiceDoubleChange'
        })
      } else {
        router.push({
          path: 'InvoiceChange'
        })
      }
    } else if (row.type == '外销-形式发票-干箱-统接') {
      use_store.status = 2;
      if (row.ganxiangCommodityList.length > 4) {
        router.push({
          path: 'InvoiceDoubleChange'
        })
      } else {
        router.push({
          path: 'InvoiceChange'
        })
      }
    }
  } else {
    router.push({
      path: 'InvoiceNewChange'
    })
  }
}

function examineList(row) {
  ganxiangExamine(selectDryList.value).then(res => {
    lingbujianExamine(selectLingList.value).then(res => {
      searchList()
    })
  })
}

function searchCustomer(params) {
  findAllByName({ name: params }).then(res => {
    customerNameOptions.value = res.data
  })
}

function exportList() {
  exportdaishenhe(searchForm.value, currentPage4.value, pageSize4.value).then(data => {
    const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
    const date = new Date().toLocaleDateString()
    const link = document.createElement('a')
    link.href = url
    let attributeValue = `待审核列表${date}-报表记录.xlsx`
    link.setAttribute('download', attributeValue)
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}
</script>
<style lang="scss">
.el-col {
  padding-right: 20px;

  .el-form-item {
    width: 100%;
    margin-right: 20px;
  }
}

// .button {
//   padding-left: 25px;
// }

.el-pagination {
  margin-top: 10px;
  float: right;
}
</style>